import React, { useEffect, useState } from 'react'
import '../style/shopping.css'
import { ProductCard } from 'react-vant';
import { getDetail } from '../../../api/yjr/yjr_api'

export default React.memo( function Shopping({ id }: any) {

    const [details, setDetails] = useState<any>([])

    const getDetails = async () => {
        const res = await getDetail({ id: id })
        setDetails(res.data.detail);
    }


    useEffect(() => {
        getDetails()
    }, [])

    return (
        <div className='shopping'>
            <p>兑换商品</p>
            <ProductCard
                style={{ backgroundColor: 'white' }}
                title={details.title}
                thumb={details.image}
                footer={
                    <>
                        <p>共计 <span style={{ color: 'red' }}>1</span> 件商品 共计：<span style={{ color: 'red' }}>{details.integral}积分</span> </p>
                    </>
                }
            />
        </div>
    )
})
